<template>
  <div>
    <Category :style="{ marginBottom: '40px' }" :disabled="isShow !== 1" />
    <SpuList v-if="isShow === 1" @cutSpuComponent="cutSpuComponent" />
    <SpuInfo
      v-else-if="isShow === 2"
      @cutSpuComponent="cutSpuComponent"
      :spuInfo="spuInfo"
    />
    <SkuInfo v-else />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import SkuInfo from "./components/SkuInfo.vue";
import SpuInfo from "./components/SpuInfo.vue";
import SpuList from "./components/SpuList.vue";
import type { spuItemType } from "@/api/spu";
import { ref } from "vue";
import useCategoryStore from "@/stores/category";
import { storeToRefs } from "pinia";

// categoryStore对象
const categoryStore = useCategoryStore();

// 获取store对象中数据
const { category3Id } = storeToRefs(categoryStore);

// 控制三个页面单独展示   1:展示spuList  2：SPUInfo  3:SkuInfo
const isShow = ref(1);

// 新增时初始化数据
const spuInfo = ref<spuItemType>({
  category3Id: category3Id.value as number,
  description: "",
  spuName: "",
  tmId: null,
  spuSaleAttrList: [],
  spuImageList: [],
});

// 触发事件显示不同的组件
const cutSpuComponent = (showIndex: number, row?: spuItemType) => {
  // 跳转组件
  isShow.value = showIndex;
  // console.log(row);
  // 获取category3Id
  spuInfo.value.category3Id = category3Id.value as number;
  // 如果有数据则传入数据
  if (row) spuInfo.value = row;
};
</script>

<style scoped lang="scss"></style>
